<template>
  <div class="brand">
    <!-- 品牌头部 -->
    <div class="pp">
      <p>品牌</p>
    </div>
    <!-- 各种品牌 -->
    <div class="pinpai_k">
      <ul>
        <li v-for="(val,index) in array" :key="index">
          <a href="">
            <img :src="val.image" alt="val.wine" />
            <p>{{val.wine}}></p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<style  scoped>
body{
  background-color:#F6F6F6 ;
}
a{
  text-decoration: none;
}
/* 品牌 */
.pp{
  width: 100%;
  height: 50px;
  font-size: 16px;
  color: #333333;
  border-bottom: 1px solid #ececec;
  margin-bottom: 0.2rem;
}
.pp p{
  height: 50px;
  text-align: center;
  line-height: 50px;
}

.pinpai_k {
  padding: 0.2rem;
  box-sizing: border-box;
}
.pinpai_k ul{
  width: 100%;
}
.pinpai_k ul li {
  height: 2rem;
  text-align: center;
  border-radius: 0.346667rem;
  background: #fff;
  /* line-height: 1.3rem; */
  box-shadow: 0 0 8px #ececec;
  margin-bottom: 0.4rem;
  position: relative;
}
.pinpai_k ul li::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.2rem;
  margin: auto 0;
  background-size: 0.2rem;
}
.pinpai_k ul li a {
  height: 100%;
  display: flex;
  align-items: center;
}
.pinpai_k ul li p {
  height: 100%;
  font-size: 0.426667rem;
  color: #666;
  font-weight: 400;
  float: left;
  margin-bottom: 0;
  line-height: 2rem;
}
.pinpai_k ul li img {
  width: 20%;
  float: left;
  padding: 0 0.5rem;
}
</style>
<script>
export default {
  name: "brand",
  data() {
    return {
      array: [
        { image: "/img/logo1.png", wine: "茅台"},
        { image: "/img/logo2.png", wine: "五粮液"},
        { image: "/img/logo3.png", wine: "剑南春"},
        { image: "/img/logo4.png", wine: "习酒"},
      ],
    };
  },
  components: {},
};
</script>
